<?php
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<tr>
<td colspan="2">
<label for="gallery"><?php /* @escapeNotVerified */ echo __('Images') ?></label>
<table id="gallery" class="gallery" border="0" cellspacing="3" cellpadding="0">
<thead id="gallery_thead" class="gallery">
    <tr class="gallery">
        <td class="gallery" valign="middle" align="center"><?php /* @escapeNotVerified */ echo __('Big Image') ?></td>
        <td class="gallery" valign="middle" align="center"><?php /* @escapeNotVerified */ echo __('Thumbnail') ?></td>
        <td class="gallery" valign="middle" align="center"><?php /* @escapeNotVerified */ echo __('Sort Order') ?></td>
        <td class="gallery" valign="middle" align="center"><?php /* @escapeNotVerified */ echo __('Delete') ?></td>
    </tr>
</thead>

<tfoot class="gallery">
<tr class="gallery">
<td class="gallery v-middle a-left"colspan="5"><?php echo $block->getAddButtonHtml() ?></td>
</tr>
</tfoot>

<tbody class="gallery">

<?php $i = 0; if (!is_null($block->getValues())): ?>
    <?php foreach ($block->getValues() as $image): $i++; ?>
        <tr id="<?php echo $block->getElement()->getHtmlId() ?>_tr_<?php /* @escapeNotVerified */ echo $image->getValueId() ?>" class="gallery">
        <?php foreach ($block->getValues()->getAttributeBackend()->getImageTypes() as $type): ?>
            <td class="gallery" align="center" style="vertical-align:bottom;">
            <a href="<?php /* @escapeNotVerified */ echo $image->setType($type)->getSourceUrl() ?>" target="_blank" onclick="imagePreview('<?php echo $block->getElement()->getHtmlId() ?>_image_<?php /* @escapeNotVerified */ echo $type ?>_<?php /* @escapeNotVerified */ echo $image->getValueId() ?>');return false;">
            <img id="<?php echo $block->getElement()->getHtmlId() ?>_image_<?php /* @escapeNotVerified */ echo $type ?>_<?php /* @escapeNotVerified */ echo $image->getValueId() ?>" src="<?php /* @escapeNotVerified */ echo $image->setType($type)->getSourceUrl() ?>?<?php /* @escapeNotVerified */ echo time() ?>" alt="<?php /* @escapeNotVerified */ echo $image->getValue() ?>" height="25" class="small-image-preview v-middle"/></a><br/>
            <input type="file" name="<?php /* @escapeNotVerified */ echo $block->getElement()->getName() ?>_<?php /* @escapeNotVerified */ echo $type ?>[<?php /* @escapeNotVerified */ echo $image->getValueId() ?>]" size="1"></td>
        <?php endforeach; ?>
        <td class="gallery" align="center" style="vertical-align:bottom;"><input type="input" name="<?php /* @escapeNotVerified */ echo $block->getElement()->getParentName() ?>[position][<?php /* @escapeNotVerified */ echo $image->getValueId() ?>]" value="<?php /* @escapeNotVerified */ echo $image->getPosition() ?>" id="<?php echo $block->getElement()->getHtmlId() ?>_position_<?php /* @escapeNotVerified */ echo $image->getValueId() ?>" size="3"/></td>
        <td class="gallery" align="center" style="vertical-align:bottom;"><?php echo $block->getDeleteButtonHtml($image->getValueId()) ?><input type="hidden" name="<?php /* @escapeNotVerified */ echo $block->getElement()->getParentName() ?>[delete][<?php /* @escapeNotVerified */ echo $image->getValueId() ?>]" id="<?php echo $block->getElement()->getHtmlId() ?>_delete_<?php /* @escapeNotVerified */ echo $image->getValueId() ?>"/></td>
        </tr>
    <?php endforeach; ?>
<?php endif; ?>

<?php if ($i == 0): ?>
    <script>
document.getElementById("gallery_thead").style.visibility="hidden";
</script>
<?php endif; ?>

</tbody></table>

<script>
require([
    'prototype'
], function () {
id = 0;
num_of_images = <?php /* @escapeNotVerified */ echo $i ?>;

window.addNewImage = function()
{

    document.getElementById("gallery_thead").style.visibility="visible";

    id--;
    num_of_images++;
    new_file_input = '<input type="file" name="<?php /* @escapeNotVerified */ echo $block->getElement()->getName() ?>_%j%[%id%]" size="1">';

    // Sort order input
    var new_row_input = document.createElement( 'input' );
    new_row_input.type = 'text';
    new_row_input.name = '<?php /* @escapeNotVerified */ echo $block->getElement()->getParentName() ?>[position]['+id+']';
    new_row_input.size = '3';
    new_row_input.value = '0';

    // Delete button
    new_row_button = <?php /* @escapeNotVerified */ echo $this->helper('Magento\Framework\Json\Helper\Data')->jsonEncode($block->getDeleteButtonHtml("this")) ?>;

    table = document.getElementById( "gallery" );

    // no of rows in the table:
    noOfRows = table.rows.length;

    // no of columns in the pre-last row:
    noOfCols = table.rows[noOfRows-2].cells.length;

    // insert row at pre-last:
    var x=table.insertRow(noOfRows-1);

    // insert cells in row.
    for (var j = 0; j < noOfCols; j++) {

        newCell = x.insertCell(j);
        newCell.align = "center";
        newCell.valign = "middle";

        if (j==2) {
            newCell.appendChild( new_row_input );
        } else if (j==3) {
            newCell.innerHTML = new_row_button;
        } else {
            newCell.innerHTML = new_file_input.replace(/%j%/g, j).replace(/%id%/g, id);
        }

    }

}

window.deleteImage = function(image)
{
    num_of_images--;
    if (num_of_images<=0) {
        document.getElementById("gallery_thead").style.visibility="hidden";
    }
    if (image>0) {
        document.getElementById('<?php /* @escapeNotVerified */ echo $block->getElement()->getName() ?>_delete_'+image).value=image;
        document.getElementById('<?php /* @escapeNotVerified */ echo $block->getElement()->getName() ?>_tr_'+image).style.display='none';
    } else {
        image.parentNode.parentNode.parentNode.removeChild( image.parentNode.parentNode );
    }
}
});
</script>
    </td>
</tr>
